"use strict";
import * as React from 'react';
import { autoSize, commonStyles } from "../../assets/styles/common";
import MyText from "../../component/MyText";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";
const { Actions } = require("react-native-router-flux");
import NoGroups from "../../component/NoGroups";
import Avatar from "../../component/Avatar";
import { groupStyles } from "../../assets/styles/groups";
import DynamicItem from "../../component/DynamicItem";
import constant from "../../utils/constant";
const { View, SectionList, TouchableOpacity, DeviceEventEmitter } = require('react-native');
const { connect } = require('react-redux');
class GroupPage extends React.Component {
    constructor() {
        super(...arguments);
        this.onRefresh = () => {
            this.props.dispatch({
                type: 'auth/fetchGroupList',
                payload: { pi: 1, ps: 5 }
            });
        };
        this.goToDynamicDetail = (dynamicItem) => {
            this.props.dispatch({
                type: 'post/detail',
                payload: { dynamicItem, postType: 'group' }
            });
        };
        this.onPraise = (type, item) => {
            this.props.dispatch({
                type: 'post/praise',
                payload: {
                    type,
                    typeId: item.id,
                    item,
                    from: 'group'
                }
            });
        };
        this.renderSectionHeader = ({ section }) => {
            const { header, data } = section;
            if (header && header.title === '我的群组') {
                return (<View>
                    <View style={[{ height: 40, backgroundColor: '#fff', display: 'flex' }]}>
                        <View style={[commonStyles.flex1, commonStyles.listItem, { justifyContent: 'space-between' }]}>
                            <MyText>{header.title}</MyText>
                            <MyIcon name='icon-tianjia' color='#DAC229' size={autoSize(20)} onPress={Actions.allGroups}/>
                        </View>
                        <Line />
                    </View>
                    {(!data || data.length == 0) ? <NoGroups /> : null}
                </View>);
            }
            else if (section.header.title === '近期帖子') {
                return (<View style={{ backgroundColor: '#fff' }}>
                    <MyText color='#000' fontSize={16} style={{ padding: 10 }}>{section.header.title}</MyText>
                    <Line />
                </View>);
            }
            return null;
        };
        this.renderItem = ({ item, index, section }) => {
            if (section.header.title === '我的群组') {
                const group = item;
                return (<TouchableOpacity key={index} style={[commonStyles.flexRow, groupStyles.listItem, { alignItems: 'center' }]} onPress={Actions.groupDetail.bind(this, { title: group.groupName, groupItem: group })}>
                    <Avatar source={{ uri: group.mainPic }} circle={false}/>
                    <MyText style={{ display: 'flex', flex: 1, marginLeft: 5 }}>{group.groupName}</MyText>
                    <MyText color='#999'>{`${group.vipNumber} 名会员`}</MyText>
                </TouchableOpacity>);
            }
            else if (section.header.title === '近期帖子') {
                const post = item;
                return (<View>
                    <View key={index} style={[commonStyles.flexRow, groupStyles.listItem, { alignItems: 'center' }]}>
                        <Avatar source={{ uri: post.group.mainPic }} circle={false}/>
                        <MyText style={{ display: 'flex', flex: 1, marginLeft: 5 }}>{post.group.groupName}</MyText>
                    </View>
                    <Line />
                    <DynamicItem item={item} onLikePress={this.onPraise.bind(this, 'post')} onCommentPress={this.goToDynamicDetail.bind(this, item)} onContentPress={this.goToDynamicDetail.bind(this, item)} onUserInfoPress={company => Actions.companyInfo({ company })}/>
                    <Line />
                </View>);
            }
            return null;
        };
        this.renderSectionSeparatorComponent = (item) => {
            if (item.leadingItem) {
                return <Line height={10}/>;
            }
            return null;
        };
        this.renderItemSeparatorComponent = (item) => {
            if (item.section.header.title === '我的群组') {
                return null;
            }
            return <Line height={2}/>;
        };
    }
    componentDidMount() {
        this.props.dispatch({
            type: 'auth/fetchGroupList',
            payload: { pi: 1, ps: 5 }
        });
        DeviceEventEmitter.addListener(constant.noticeKeyOfRefreshGroups, this.onRefresh);
    }
    componentWillUnmount() {
        DeviceEventEmitter.removeListener(constant.noticeKeyOfRefreshGroups);
    }
    render() {
        return (<View style={commonStyles.container}>
                <SectionList renderSectionHeader={this.renderSectionHeader} renderItem={this.renderItem} extraData={this.props} SectionSeparatorComponent={this.renderSectionSeparatorComponent} ItemSeparatorComponent={this.renderItemSeparatorComponent} keyExtractor={(item, index) => index} onRefresh={this.onRefresh} refreshing={this.props.auth.loading} sections={[
            { data: this.props.auth.myGroups, header: { title: '我的群组' } },
            { data: this.props.auth.groupNews, header: { title: '近期帖子' } },
        ]}/>
            </View>);
    }
}
export default connect(({ auth, post, group }) => ({ auth, post, group }))(GroupPage);
